<template>
  <div class="box" :ref="container.ref" @scroll="container.onScroll">
    <ul ref="wrapperRef" >
      <li v-for="item in list" :key="item" class="item">{{item.data}}</li>
    </ul>
  <div v-if="list.length>=0">加载中</div>
  </div>
</template>

<script  setup>

import { debounce } from 'lodash';
import { watch } from 'vue';
const loading = ref(false)
import { useVirtualList } from 'vue-hooks-plus'
const wrapperRef = ref()
const props = defineProps({
    list:{
        type:Array,
        default: () => [],
        rquired: true
    }
})
const originalList = computed(() => {
  return props.list??[]
})


// const originalList = computed(() => Array.from(Array(999).keys()))
const [list, container] = useVirtualList(originalList, {
  wrapperTarget: wrapperRef,
  itemHeight: 20,
  overscan: 10,
})
defineExpose({
  wrapperRef
})

</script>

<style lang="scss" scoped>
.box {
  height: 200px;
  width: 200px;
  background: blue;
  margin: 10px;
  overflow: auto;

  .item {
    height: 20px;
    width: 20px;
    background: red;
    color: pink;
    position: relative;
  }
}

</style>